Jarnee
БрендДизайн-системаМакетЭкраныАнимацииПланирование
Назад к планированию
Планирование План: «Экраны» → интерактивный гайд вёрстки

Предложение и план доработок

«Экраны» как спецификация вёрстки

Идея: превратить галерею в «режим спецификации» — над каждым живым экраном показать разметку (пины и редлайны), а рядом структурированный лист со значениями из дизайн-системы: шрифт и кегль, цвет-токен, отступы по 4-сетке, радиус, тень, компонент и анимация. Это полноценный гайд «как сверстать экран» — и почти всё видно сразу.

Задача большая, поэтому сначала — формат на согласование. Ниже: концепт-превью, пул вопросов с вариантами на выбор (рекомендованный помечен звездой) и план реализации по этапам. Отметьте варианты, оставьте замечания — выбор сохраняется автоматически.

Концепт-превью · как это выглядит

Живой экран + разметка + спек-лист

Слева — настоящий экран из прототипа с пинами и редлайнами. Справа — лист аннотаций: каждый пин раскрывает шрифт, цвет, отступы, радиус, тень и компонент. Это иллюстрация формата, не финал.

поле 20
1
2
3

screen: showcase · витрина

Спек-лист · витрина поездок

1Заголовок «Привет, Алекс»
H2 · 24/800 Manrope tracking −0.025em White #FFFFFF отступ ↑ 5
2Карточка готовности
компонент: ProgressRing → радиус: 24 card тень: Card паддинг: 16 фон: Panel
3Кнопка «Создать поездку»
Body 14/800 Brand 135° радиус: 16 тап-зона: 48 ✓ press 120ms

Каждое значение — это токен из дизайн-системы. Имена и компоненты можно сделать кликабельными → ведут в Систему или в DC компонента.

рекомендую

Аннотированный экран

Пины и редлайны поверх экрана + лист рядом. Всё видно сразу.

Интерактивный инспектор

Наводишь на элемент — всплывает его спека. Чище, но требует действий.

Разобранная анатомия

Экран разложен на слои с подписями отступов между ними.

На согласовании

{{ nQ }} вопросов · {{ nW }} задач

{{ a.n }}

{{ a.title }}

Отвечено вопросов: {{ answeredN }} / {{ nQ }}. Достаточно принять рекомендованные варианты или выбрать свои и оставить замечания.

Взято в работу

{{ inclN }} / {{ total }}

Отмеченные пункты войдут в финальный план. Рекомендованный вариант помечен звездой.

Прогресс реализации · {{ wDone }} из {{ nW }} задач

Формат согласован, гайд собран и отполирован на всех экранах

Выполнено · {{ wDone }}
Частично · {{ wPartial }}
Не начато · {{ wTodo }}

{{ decidedN }} / {{ nQ }} вопросов решено

Формат, глубина спеки, токены+значения, Compose, поведение, a11y, размещение — согласованы.

Этапы 1–3 закрыты

Модель данных, спек-оверлей (пины), спек-лист, пилот и тираж на все 14 рабочих экранов.

Этап 4 — закрыт

Поиск по элементам, фильтр «Замечания», тумблер разметки, печать, «Копировать спеку», копирование чипа по клику и ссылки токенов в Дизайн-систему — готовы. Спека «Ключевых состояний» — отдельной задачей.

{{ g.num }} · {{ g.short }}

{{ g.title }}

{{ g.desc }}

{{ f.id }} {{ f.kindLabel }} {{ f.statusLabel }}

{{ f.title }}

{{ f.problem }}

Сейчас

{{ f.beforeEl }}

Станет

{{ f.afterEl }}

Варианты

{{ o.label }} рекомендую

{{ o.desc }}

Итог согласования

Принятые решения · {{ inclN }} {{ inclWord }}

{{ c.id }}

{{ c.title }}

→ {{ c.choice }}

«{{ c.comment }}»

{{ c.kindLabel }}

Пока ничего не отмечено. Поставьте галочки на нужных пунктах выше — или нажмите «Принять все рекомендованные», чтобы собрать план из моих предложений.

Как только вы ответите на вопросы и отметите пункты — соберу пилот (этап 1–2): модель данных спеки, спек-оверлей и спек-лист на одном эталонном экране. Покажу — после правок прогоню формат на остальные экраны.